<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自友行</title>
    <link href="${pageContext.request.contextPath}/css/home/index.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
<%--    <script src="${pageContext.request.contextPath}/js/home/index.js"></script>--%>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css" media="all">
    <style>
        .user .praise-btn{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url("${pageContext.request.contextPath}/images/home/praise12.svg");
            cursor: pointer;
            position: relative;
            top: 7px;
        }

        .user .praise-btn2{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image:url("${pageContext.request.contextPath}/images/home/praise13.svg");
            cursor: pointer;
            position: relative;
            top: 7px;
        }
    </style>
</head>
<body>
<script>
    var customer = <%=request.getSession().getAttribute("loginCustomer")%>;
    var custId = "${loginCustomer.custId}";
    // getRecommend(custId);
</script>
<%--<script>--%>
<%--    getByPage();--%>
<%--</script>--%>

<!--===================1.头部导航 nav=================-->
<c:import url="/header/header.jsp"/>
<!--===================2.横幅 banner=================-->
<div class="banner">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div class="img"><img src="${pageContext.request.contextPath}/images/home/big-banner1.jpg" style="width: 100%"></div>
            <div class="img"><img src="${pageContext.request.contextPath}/images/home/big-banner2.jpg" style="width: 100%"></div>
            <div class="img"><img src="${pageContext.request.contextPath}/images/home/big-banner3.jpg" style="width: 100%"></div>
            <div class="img"><img src="${pageContext.request.contextPath}/images/home/big-banner4.jpg" style="width: 100%"></div>
            <div class="img"><img src="${pageContext.request.contextPath}/images/home/big-banner5.jpg" style="width: 100%"></div>
        </div>
    </div>
    <script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
    <script>
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,height: '520px'
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</div>
<!--===================3.主要内容 main=================-->
<div class="main">
    <div class="cusId" hidden>
        <c:if test="${empty loginCustomer.custId}">0</c:if>
        <c:if test="${!empty loginCustomer.custId}">${loginCustomer.custId}</c:if>
    </div>
    <script>
        var custId=document.querySelector(".cusId").innerText.trim().replace(/\s/g,"");
    </script>
    <div class="customer" hidden>
        <c:if test="${empty loginCustomer}">null</c:if>
        <c:if test="${!empty loginCustomer}">${loginCustomer}</c:if>
    </div>
<%--    <!--左侧推广-->--%>
<%--    <div class="left-ad">--%>
<%--        <ul class="recommendSights">--%>
<%--        </ul>--%>
<%--    </div>--%>
    <!--左侧推广-->
    <div class="left-ad">
        <ul>
            <li>
                <div class="ad-title">
                    <h3>旅行家专栏</h3>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
            <li>
                <div class="ad-title">
                    <h3>旅行家专栏</h3>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
            <li>
                <div class="ad-title">
                    <h3>旅行家专栏</h3>
                </div>
                <div class="ad-img">
                    <a href=""><img src="images/home/ad-img1.jpeg"></a>
                </div>
                <div class="ad-details">
                    <a href="">西安：旧长安的画皮</a>
                    <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="right-notes">
        <!--右侧上-->
        <div class="right-nav">
            <ul>
                <li class="hot-notes">
                    <a href="javascript:getByPage()" class="hot">热门游记</a>
                    <span class="notes-sift">
                                <i></i>
                                筛选
                            </span>

                    <div class="sift-lists">
                        <div class="destination-search">
                            <div class="label">目的地</div>
                            <div class="destination-search-area">
                                <div class="search-input">
                                    <input type="text" placeholder="输入你想查看的目的地" class="search-notes">

                                </div>
                                <div class="hot-place">
                                    <a href="#">斯里兰卡</a>
                                    <a href="#">济州岛</a>
                                    <a href="#">香港</a>
                                    <a href="#">北京</a>
                                    <a href="#">云南</a>
                                    <a href="#">泰国</a>
                                    <a href="#">青海湖</a>
                                    <a href="#">日本</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="new-notes">
                    <a href="javascript:getByPageOederByDate()" class="new">最新发表</a>
                </li>
            </ul>
            <div class="write-notes">
                <a href="javascript:write()" class="write">
                    <i></i>
                    写游记
                </a>

            </div>
        </div>
        <script>
            var customer=document.querySelector(".customer").innerText.trim().replace(/\s/g,"");
            function write(){
                if( customer=== "null"){
                    alert("请先登录");
                }else {
                    $(".write").attr("href","${pageContext.request.contextPath}/notes/write_notes.jsp")
                    document.querySelector(".write").onclick=function (){

                    }
                    document.querySelector(".write").click();
                }
            }

        </script>
        <div style="display: block;width: 700px;min-width: 700px;">
            <div class="notes-lists-hot" id="notes-lists-hot">

<%--                    <div class="item">--%>

<%--                        <div class="item-img">--%>
<%--                            <a href="http://localhost:8080/zyx/index/notes/details/result.data.list[i].travelNotes.travelNotesId/result.data.list[i].customer.custId" class="main-img">--%>
<%--                                <img src="result.data.list[i].travelNotes.travelNotesMainImg">--%>
<%--                                </a>--%>
<%--                        </div>--%>

<%--                        <div class="notes">--%>
<%--                            <div class="notes-details">--%>
<%--                                <a href="http://localhost:8080/zyx/index/notes/details/result.data.list[i].travelNotes.travelNotesId/result.data.list[i].customer.custId" class="notes-title">result.data.list[i].travelNotes.travelNotesTitle</a>--%>
<%--                                <p class="notes-text">result.data.list[i].travelNotes.travelNotesOthrt1</p>--%>
<%--                                <span class="user">--%>
<%--                                    <div class="a">--%>
<%--                                    <a href="#"><img src="result.data.list[i].customer.custProfile"></a>--%>
<%--                                    <a href="#" class="user-name" style="font-family: Arial;">result.data.list[i].customer.custNickname</a>--%>
<%--                                    <img src="images/home/loc1.svg">--%>
<%--                                    <a href="#">result.data.list[i].travelNotes.travelNotesOthrt2</a>--%>
<%--                                    </div>--%>
<%--                                <em class="praise-count">praiseCount</em>--%>
<%--                                <c:if test="${empty result.data.list[i].notesPraise}">--%>
<%--                                    <a href="javascript: void(0)" class="praise-btn" onclick="praise(this,result.data.list[i].travelNotes.travelNotesId,custId1)"><i></i></a>--%>
<%--                                </c:if>--%>
<%--                                <c:if test="${!empty result.data.list[i].notesPraise}">--%>
<%--                                    <a href="javascript: void(0)" class="praise-btn2" onclick="praise(this,result.data.list[i].travelNotes.travelNotesId,custId1)"><i></i></a>--%>
<%--                                </c:if>--%>
<%--                                </span>--%>
<%--                            </div>--%>
<%--                        </div>--%>

<%--                    </div>--%>

            </div>
            <div id="page">

            </div>

        </div>

    </div>
<%--    <div id="test1"></div>--%>
    <script src="${pageContext.request.contextPath}/dist/layui/layui.js"></script>
<%--    <script>--%>
<%--        layui.use(laypage, function(){--%>
<%--            var laypage = layui.laypage;--%>
<%--            //执行一个laypage实例--%>
<%--            laypage.render({--%>
<%--                elem: page //注意，这里的 test1 是 ID，不用加 # 号--%>
<%--                ,count: 50 //数据总数，从服务端得到--%>
<%--            });--%>
<%--        });--%>
<%--    </script>--%>

</div>

<!--===================4.底部 footer=================-->
<%--<div class="footer">--%>
<c:import url="/header/footer.jsp"/>
<%--</div>--%>

<script src="${pageContext.request.contextPath}/js/home/index.js"></script>
<script>getByPage();</script>
</body>
</html>